import React, { useState } from 'react'
import dayjs from 'dayjs'
import { View, Input, Text, Picker } from '@tarojs/components'
import './index.less'
const index = (props) => {
  const { data = {}, index, ChangeValue } = props
  const {
    title,
    label,
    require = false,
    desc,
    value = '',
    rule,

  } = data
  const [visible, setVisible] = useState(false)

  const selectType = {
    'YYYY-MM': '年/月',
    'YYYY-MM-DD': '年/月/日',
    'YYYY-MM-DD HH:mm': '年/月/日',
    'HH:mm': '时/分',
    'HH:mm:ss': '时长：时/分/秒'
  }[rule]
  const renderType = {
    'YYYY-MM': 'month',
    'YYYY-MM-DD': 'day',
    'YYYY-MM-DD HH:mm': 'day',

  }[rule]
  const timeColumns = () => {
    const hours = [];
    const minutes = [];
    const seconds = [];

    for (let i = 0; i < 24; i++) {
      hours.push({
        label: `${i < 10 ? '0' + i : i}时`,
        value: `${i < 10 ? '0' + i : i}`,
      });
    }

    for (let i = 0; i < 60; i++) {
      minutes.push({
        label: `${i < 10 ? '0' + i : i}分`,
        value: `${i < 10 ? '0' + i : i}`,
      });
      seconds.push({
        label: `${i < 10 ? '0' + i : i}秒`,
        value: `${i < 10 ? '0' + i : i}`,
      });

    }
    if (rule === 'HH:mm') {
      return [hours, minutes]
    }
    else {
      return [hours, minutes
        , seconds
      ]
    }
  }
  if (rule === 'HH:mm' || rule == 'HH:mm:ss') {
    return <View className='CollectWps_box_content'>
      <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
      <View className='CollectWps_desc'>{desc}</View>

      <Picker
        mode={'multiSelector'}
        rangeKey={'label'}
        visible={visible}
        onChange={(e) => {
          const option = timeColumns()
          const value = e.detail.value
          if (rule === 'HH:mm') {
            ChangeValue({
              index,
              value: {
                value: option[0][value[0]].label + '-' + option[1][value[1]].label
              }
            })
          }
          else {
            ChangeValue({
              index,
              value: {
                value: option[0][value[0]].label + '-' + option[1][value[1]].label + '-' + option[2][value[2]].label
              }
            })
          }


        }}
        value={value}
        range={timeColumns()}
      >
        <View className='CollectWps_dropdown' onClick={() => { setVisible(true) }}>
          {value ? value : '请选择' + selectType}
        </View>
      </Picker>
    </View>
  }
  else {
    return <View className='CollectWps_box_content'>
      <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
      <View className='CollectWps_desc'>{desc}</View>
      <Picker
        fields={renderType}
        onChange={(e) => {
          ChangeValue({
            index,
            value: {
              value: e.detail.value
            }
          })

        }}
        value={value}
        mode={'date'}
      >
        <View className='CollectWps_dropdown'>
          {value ? value : '请选择'}
        </View>
      </Picker>
    </View>
  }

}
export default index